<!--
  -  您可以更改此项目但请不要删除作者署名谢谢，否则根据中华人民共和国版权法进行处理.
  -  You may change this item but please do not remove the author's signature,
  -  otherwise it will be dealt with according to the Copyright Law of the People's Republic of China.
  -
  -  yangbuyi Copyright (c) https://yby6.com 2024.
  -->

<template>
  <!-- 公共头 -->
  <header id="header">
    <section class="container">
      <div class="nav">
        <div class="t-menu__logo">
        </div>

        <div class="nav-item" v-for="(item, index) in navList">
          <div class="nav-item-menu">
            <router-link :to="item.url" tag="li" active-class="current" exact>
              <div :class="
            {
              'nav-item-menu-div': true,
              'active': routeType === item.routeType
            }" @click="activeRoute(item.routeType)">

                <span>
                  <svg id="text" class="ruyi-icon ruyi-icon-text" xmlns="http://www.w3.org/2000/svg" width="24"
                       height="24" viewBox="0 0 24 24" style="font-size: 24px;"><g fill="none"><rect x="8" y="17"
                                                                                                     width="8"
                                                                                                     height="2"
                                                                                                     fill="currentColor"></rect><rect
                    x="8" y="4" width="7" height="4" transform="rotate(90 8 4)" fill="currentColor"
                    fill-opacity="0.5"></rect><rect x="20" y="4" width="7" height="4" transform="rotate(90 20 4)"
                                                    fill="currentColor" fill-opacity="0.5"></rect><path
                    d="M20 4H4V8H10L10 18H14L14 8H20V4Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"
                    fill-opacity="0.5"></path></g></svg>
                  {{ item.text }}
                </span>
              </div>
            </router-link>
          </div>
        </div>
      </div>
      <div class="clear"></div>
    </section>
  </header>
</template>
<script setup>
import { toggleDark } from "@/composables";

const { proxy } = getCurrentInstance();

let routeType = ref(parseInt(localStorage.getItem("routeType")) ?? 1)

const router = useRouter();

const navList = ref(router.getRoutes().map((item, index) => {
  return {
    url: item.path,
    routeType: index + 1,
    text: item.meta.text
  }
}));

const activeRoute = (type) => {
  routeType.value = type
  localStorage.setItem("routeType", type)
}


// 声明触发的事件
const emit = defineEmits([ "changeLan" ]);

let lanTitle = ref("中文");
let toggleTitle = ref("明亮");
const toggleDarkBtn = () => {
  toggleTitle = toggleDark() ? "明亮" : "暗色";
};
const changeLanBtn = () => {
  lanTitle.value = lanTitle.value === "中文" ? "English" : "中文";
  const lanVal = lanTitle.value !== "中文" ? "中文" : "English";
  // const modalVal =
  //   lanTitle.value !== "中文"
  //     ? "切换全局组件为中文"
  //     : "Switch global components to English";
  // proxy.$modal.msgSuccess(modalVal);
  // 带参数触发父组件函数
  emit("changeLan", lanVal);
};
// 初始化
changeLanBtn();
</script>
<style scoped lang="scss">
#header {
  background-color: #000000;
  box-sizing: border-box;
  flex-shrink: 0;
}

.container {
  padding: 0;
  background-color: #000000;
}

.nav {
  display: flex;
  height: 52px;

  .t-menu__logo {
    align-items: center;
    display: flex;
    height: 100%;
    margin-right: 20px;
    padding-left: 20px !important;
  }

  .nav-item {
    align-items: center;
    display: flex;

    color: rgba(0, 0, 0, .9);
    list-style: none;
    margin: 0;
    padding: 0;

    .nav-item-menu {
      position: relative;
    }

    .active {
      background-color: #0052d9;
    }

    .nav-item-menu .nav-item-menu-div {

      position: relative;
      --ripple-color: #e8e8e8;
      align-items: center;
      border-radius: 3px;
      color: #fff;
      cursor: pointer;
      display: flex;
      text-align: center;
      text-overflow: ellipsis;
      padding: 5px 16px;
      justify-content: center;
      box-sizing: content-box;
      transition: all .28s cubic-bezier(.645, .045, .355, 1);

      a {
        text-decoration: none;
        transition: all .28s cubic-bezier(.645, .045, .355, 1);
      }

      span {
        display: flex;
        flex-direction: row;
        align-items: center;
        font-size: 16px;
      }

    }

    .nav-item-menu .nav-item-menu-div:before {
      content: "";
      display: block;
      height: 20px;
      left: 0;
      position: absolute;
      right: 0;
    }

  }

}

.toggleDarkBtn {
  align-items: center;
  display: flex;
  line-height: 32px;
  overflow: hidden;
  position: relative;
  text-align: right;
  padding-right: 20px;
}

@media screen and (max-width: 500px) {
  .toggleDarkBtn {
    margin-top: 15px;
    /*width: 30%;*/
    margin-right: 20px;
  }

  .container {
    padding: 0;
  }

  .toggleDarkBtn {
    width: min-content;
    margin-top: -30px;

    .btn2 {
      margin-top: 10px;
    }
  }
}
</style>
